<template>
    <BaseDialog ref="baseDialog" width="600px" title="详情" @confrim="confrim">
        <div class="title">{{ info.title }}</div>
        <div class="video" v-if="url">
            <video :src="url" controls autoplay></video>
        </div>
        <div class="content" v-html="info.note"></div>
    </BaseDialog>
</template>


<script>
import { getFileUrl } from '@/api/common'

export default {
    data() {
        return {
            url:null,
           info:{}
        }
    },
    methods: {
        open(data) {
            this.info = data
            this.getVideoUrl(data)
            this.$refs.baseDialog.open()
        },
        async getVideoUrl(data){
            const res = await getFileUrl({
                fileName: `light/${data.videoId}.mp4`,
            })
            this.url  = res.content
        },
        confrim() {
            this.$emit('confrim',this.dot)
            this.close()
        },
        close() {
            this.$refs.baseDialog.close()
        }
    }
}
</script>

<style  scoped>
.title{
    text-align: center;
    color: #272727;
    font-size: 20px;
    margin-bottom: 20px;
}
.subtract{
    border: 1px solid #c0bebe;
    padding: 10px 5px;
    border-radius: 4px;
}
.content{
    max-height: 600px;
    overflow-y: auto;
}
video{
    width: 100%;
    height: 200px;
}
</style>